<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html">

	<style type="text/css">
<!--
.price-nav {
	font-size: 14px;
	font-weight: bolder;
	background-color: #3272b9;
	height: 25px;
}

.price-nav a:hover {
	background-color: red;
}

.price-nav ul {
	margin: 0;
	padding: 0;
}

.price-nav ul li {
	display: block;
	float: left;
}

.price-nav ul li a {
	color: #FFFFFF;
	height: 25px;
	padding: 5px 10px 8px 10px;
	text-decoration: none;
}

.price-content {
	height: 178px;
	font-size: 12px;
	text-align: center;
	overflow: hidden;
}

.price-content ul {
	padding: 5px;
	margin-top: -1px;
	*margin-left: -1px;
}

.price-content ul li {
	display: block;
	width: 90px;
	float: left;
}

.price-content img {
	margin-top: 5px
}
-->
</style>
	<div
		style="margin: 5px 0 5px 2px; border-style: solid; border-color: #3272b9; border-width: 5px;">
		<div class="price-nav">
			<ul>
				<li><a href="#11" onmouseover="showprice()">价格</a>
				</li>
				<li><a href="#22" onmouseover="showchart()">指数</a>
				</li>
			</ul>
		</div>
		<div id="pricetab1" class="price-content">
			<ul style="font-weight: bolder;">
				<li>品名</li>
				<li>波动</li>
				<li>均价</li>
				<li>涨跌</li>
				<li>日期</li>
			</ul>
			<ui:repeat value="#{priceAction.priceList}" var="price"
				varStatus="status">
				<ul>
					<li><a href="#">#{price.name}</a>
					</li>
					<li><a href="#">#{price.range}</a>
					</li>
					<li><a href="#">#{price.average}</a>
					</li>
					<li><a href="#">#{price.change}</a>
					</li>
					<li><h:outputText value="#{price.createTime}">
							<f:convertDateTime pattern="yyyy-MM-dd" timeZone="GMT+8" />
						</h:outputText>
					</li>
				</ul>
			</ui:repeat>
		</div>
		<div id="pricetab2" class="price-content" style="display: none;">
			<h:graphicImage url="/chart/bfmet?slice=300&amp;color=ff0000" />
		</div>
		<div
			style="font-size: 15px; font-weight: bolder; background-color: #3272b9; color: #FFFFFF; height: 27px; margin-top: 0;">
			<ul style="margin-top: 1px;">
				<li style="display: block; padding-top: 5px;">更多</li>
			</ul>
		</div>
	</div>

	<script language="javascript">
		function showprice() {
			document.getElementById("pricetab1").style.display = "block";
			document.getElementById("pricetab2").style.display = "none";
		}

		function showchart() {
			document.getElementById("pricetab1").style.display = "none";
			document.getElementById("pricetab2").style.display = "block";
		}
	</script>

</ui:composition>